<template>
  <div>
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="SXDirectionData"
      :pagination="pagination"
      :customRow="onClickRow"
      bordered
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: "实习方向",
    dataIndex: "name",
    width: 400,
  },
  {
    title: "详情简介",
    dataIndex: "description",
  },
];
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      columns, //标头的配置
    };
  },
  methods: {
    ...mapMutations("Apply", ["setSXDirectionData", "setSXDirectionKey"]),
    //点击行
    onClickRow(SelecrRow) {
      return {
        on: {
          click: () => {
            this.setSXDirectionKey(SelecrRow.key);
          },
        },
      };
    },
    //获取实习方向数据
    getDirectionData() {
      this.$api.GetCategory().then((res) => {
        var tempData = res.data.result.map((item) => {
          return {
            key: item.id,
            name: item.name,
            description: item.description,
          };
        });
        this.selectedRowKeys = [`${tempData[0].key}`];
        this.setSXDirectionData(tempData);
      });
    },
  },
  computed: {
    ...mapState("Apply", ["SXDirectionData", "SXDirectionKey"]),
    rowSelection() {
      return {
        type: "radio", //单选
        selectedRowKeys: this.SXDirectionKey, //默认的选中项
        //点击前面的单选按钮
        onChange: (selectedRowKeys) => {
          this.setSXDirectionKey(selectedRowKeys[0]);
        },
      };
    },
    pagination() {
      return {
        pageSize: 5, //每页中显示数据
      };
    },
  },
  created() {
    this.getDirectionData();
  },
};
</script>

<style lang="less" scope>
.ant-table-wrapper {
  .ant-spin-nested-loading {
    border: 1px solid #ccc;
  }
}

.ant-table-thead {
  tr {
    th {
      background-color: #d8d8d8;
      border-bottom: 1px solid #d8d8d8;
    }
  }
}

.ant-table-row-selected {
  td {
    background-color: #f0f0f0 !important;
  }
}
</style>